<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
				/*          名  时间  匀速 */
			}
			/*  关键帧动画  translate(20px) scale(1)*/
			@keyframes dfc{
				0%{
					transform: translate(20px) rotateX(180deg);
				}
				30%{
					transform: translate(300px) rotateY(360deg);
				}
				50%{
					transform: translate(500px) rotateY(360deg);
				}
				100%{
					transform: translate(800px) rotateZ(720deg);
				}
			}
			.imgb{
				animation: dfc2 .8s linear infinite;
			}
			@keyframes dfc2{
				0%{
					transform: translate(20px) rotateX(180deg);
				}
				30%{
					transform: translate(300px) rotateY(360deg);
				}
				50%{
					transform: translate(500px) rotateY(360deg);
				}
				100%{
					transform: translate(800px) rotateZ(720deg);
				}
			}
		</style>
	</head>
	<body>
		<img src="../img/1111.gif" alt="1" width="500px" height="500px" />
		<audio src="../img/qian.mp3" autoplay></audio>
		<button id="one">开始</button>
		<button id="two">暂停</button>
		<button id="three">翻转</button>
		
		<script>
			//  点击  开始  图片切换并且添加样式  .imga
			$("#one").click(function(){
				$("img").attr("src","../img/2222.gif").addClass("imga");
			});
			
			//  暂停  音乐消失+动画效果失效？
			$("#two").click(function(){
				$("audio").removeAttr("src");
				$("img").removeClass("imga");
			});
			//  翻转  切换  imga  切换 imgb
			$("#three").click(function(){
				$("img").toggleClass("migb");
				$("audio").attr("src","../img/qian.mp3");
			});
		</script>
	</body>
</html>